<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			系统设置 / 菜单管理 / 修改菜单
		</view>
		
		<view class="body">
			<view class="parent-title" v-if="parent " >
				<view>
					父类：{{parent.title}}
				</view>
				<view class="update-parent" @click="this.showParend = true ;"  v-if=" form.url != null">
					<text class="iconfont icon-xiugai"></text>
					更换父类
				</view>
			</view>
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						唯一标识
					</view>
					<u-form-item prop="menu_id" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.menu_id" 
							style="margin:0"
							placeholder="请输入唯一标识"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						分类标题
					</view>
					<u-form-item prop="title" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.title" 
							style="margin:0"
							placeholder="请输入标题"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						菜单排序
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.sort" 
							style="margin:0" 
							type="number" placeholder="请输入菜单排序"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						菜单图标
					</view>
					<u-form-item prop="icon" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.icon" 
							style="margin:0"
							placeholder="请输入图标"
						/>
						<view class="icon" @click="this.showIcon = true" >
							&nbsp;
							<text class="iconfont icon-zujian"></text>
							<text>内置图标</text>
						</view>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						是否为阿里巴巴图标
					</view>
					<u-form-item label="" prop="radio"  :border-bottom="false">
						<u-radio-group v-model="form.is_alibaba_icon">
							<u-radio v-for="(item, index) in radioList2" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				
				<view class="u-form-textInput">
					<view class="u-form-name">
						跳转链接
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.url" 
							style="margin:0" 
							placeholder="请输入跳转链接"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						是否展示
					</view>
					<u-form-item label="" prop=""  :border-bottom="false">
						<u-radio-group v-model="form.is_show">
							<u-radio v-for="(item, index) in radioList1" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>
		</view>
	</view>
	<u-popup v-model="showIcon" mode="center" >
		<view class="popup-box" @click="this.showIcon = false" >
			<ui-icon></ui-icon>
		</view>
	</u-popup>
	<!-- 更换父类 -->
	<u-popup v-model="showParend" mode="center" >
		<view class="popup-box" >
			<view>
				更换父类
			</view>
			<view class="popup-body">
				<u-radio-group v-model="parent._id"  wrap >
					<u-radio
						@change="radioChange($event,item)" 
						v-for="(item, index) in parentArr" :key="index" 
						:name="item._id"
					>
						<view class="parentArr-item" >
							<text :class="`iconfont ${item.icon}`"></text>
							{{item.title}}
						</view>
					</u-radio>
				</u-radio-group>
			</view>
		</view>
	</u-popup>
	<u-toast ref="uToast" />
</template>

<script>
	const menuDb = uniCloud.importObject("menu",{customUI:true});
	import {rules,form,radioList1,radioList2} from '/common/js_file/menu-manage.js' ;
	export default {
		data() {
			return {
				loading:false,
				form,
				radioList1,
				radioList2,
				rules:rules,
				parent:null,
				showIcon:false, // 图标显示
				showParend:false,// 更换父类
				parentArr:[], // 可作为父类的数据
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',
					type: 'error',
					duration:500,
					position:'top',
					url: '/pages/system/class-manage/class-manage'
				})
			}
			this.getParentData();
		},
		methods: {
			async submit() {
				this.$refs.form1.validate(async valid => {
					if (valid) {
						this.loading = true ;
						let verifyUniquenessMenuId = await menuDb.verifyUniquenessMenuId(this.form.menu_id)
						if(verifyUniquenessMenuId.code == 200){
							if(verifyUniquenessMenuId.result > 1){
								return this.$refs.uToast.show({title: '唯一标识重复',type: 'error',duration:2000,position:'center'})
							}
						}
						this.onUpdate(this.form) ;
					} else {
						// console.log('验证失败',this.form);
					}
				});
			},
			// 修改
			onUpdate(form){
				// return console.log(form)
				menuDb.updateMenu(form,{_id:this.uid}).then(result => {
					this.loading = false ;
					if(result.code == 200){
						this.$refs.uToast.show({title: '修改成功',type: 'primary',duration:500,
							position:'top',url: '/pages/system/menu-manage/menu-manage'
						})
					}
				})
			},
			// 
			getData(){
				this.loading = true ;
				menuDb.getMenuOne(this.uid).then(result => {
					const data = result.result ;
					this.form =  data;
					this.parent = result.parent;
					this.loading = false;
				})
			},
			// 获取父类 
			getParentData(){
				menuDb.getParentData().then(res =>  {
					this.parentArr = res.result.data ;
				})
			},
			// 父类选择
			radioChange(ev,item){
				this.form.parent_id = ev;
				
				this.parent = {
					title:item.title,
					_id:item._id
				};
				this.showParend = false;
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style scoped lang="scss" >
	.popup-box{
		width:688px;
		padding:10px;
		.parentArr-item{
			display: flex;
			align-items: center;
			font-size:16px;
			.iconfont{
				font-size:25px;
			}
		}
	}
	.icon{
		cursor: pointer;
		color:$uni-color-primary;
	}
	.parent-title{
		display: flex;
		justify-content: space-between;
		border-radius: 5px;
		padding:10px 5px;
		margin:5px 0;
		font-weight: bold;
		background: #f0f3f4;
		.update-parent{
			font-weight:500;
			cursor:pointer;
			color:$uni-color-primary;
		}
	}
.body{
		padding:10px 30px;
		width: 50%;
	}
</style>
